#history {
  color: #d3d6dd;
  background-color: #000000;
  width: 100%;
  height: 100vh;

  .bg {
    height: 100%;
    width: 100%;
    padding: 0.2rem 0.2rem 0 0.2rem;
    background-image: url("../../assets/pageBg.png");
    background-size: 100%;
    background-position: center center;
  }

  .host-body {
    .title {
      position: relative;
      width: 10rem;
      text-align: center;
      background-size: cover;
      background-repeat: no-repeat;

      .title-text {
        font-size: 0.4rem;
        position: absolute;
        bottom: 0.2rem;
        left: 50%;
        transform: translate(-50%);
        font-weight: bold;
        z-index: 1000;
        width: 100%;
      }

      .title-bototm {
        position: absolute;
        bottom: -0.375rem;
        left: 50%;
        transform: translate(-50%);
        top: 0.8rem
      }
    }

    // 平行四边形
    .react-left {
      cursor: pointer;
      font-size: 0.225rem;
      width: 3.75rem;
      height: 0.625rem;
      line-height: 0.625rem;
      text-align: center;
      transform: skewX(-45deg);
      margin-top: -0.2rem;

      .react-after {
        position: absolute;
        right: -0.3125rem;
        top: 0;
        height: 0.625rem;
        width: 0.625rem;
        background-color: #0f1325;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }

    .react-right {
      cursor: pointer;
      font-size: 0.225rem;
      width: 3.75rem;
      height: 0.625rem;
      line-height: 0.625rem;
      text-align: center;
      transform: skewX(45deg);

      .react-before {
        position: absolute;
        left: -0.3125rem;
        top: 0;
        height: 0.625rem;
        width: 0.625rem;
        background-color: #0f1325;
        transform: skewX(-45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(-45deg);
      }
    }

  }

  #consume {
    width: 100%;
    height: calc((100% - 1.5rem) * 0.9);
    background: #fff;
    border-radius: 0.4rem;
    margin-top: 0.2rem;

    .consume_top {
      padding-top: 0.7rem;
    }

    .consume_middle {
      height: 78%;
      background: #fff;
      padding: 0.4rem 0.4rem 0.5rem 0.4rem;
    }

    .consume_bottom {
      display: flex;
      justify-content: center
    }

    .text_ce {
      text-align: center;
    }
  }
}
